<template>
  <div class="container">
    <div class="main">
      <!-- 统计看板 start -->
      <div class="chart">
        <el-row>
          <el-col :span="10"><p>统计看板</p></el-col>
          <el-col :span="6">
            <el-button type="text" @click="getPurchaseStatistics(0)">{{$t('m.home.theweek')}}</el-button>
            <el-button type="text" @click="getPurchaseStatistics(1)">{{$t('m.home.themonth')}}</el-button>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              @change="getPurchaseStatistics(2)"
              v-model="statisticsDate"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              :start-placeholder="$t('m.otherstore.startdate')"
              :end-placeholder="$t('m.otherstore.enddate')"
              :clearable="false">
            </el-date-picker>
          </el-col>
        </el-row>
        <!-- 采购统计折线图 -->
        <div id="sChart" v-if="orderStatisticsData.length">
          <lineChart ref="chartData" :data="orderStatisticsData"></lineChart>
        </div>
      </div>
      <!-- 统计看板 end -->

      <!-- 异常看板 start -->
      <div class="abnormal">
        <div class="aleft">
          <p class="aTitle">异常看板</p>
          <el-card class="one">
            <p>超时未审核采购单</p>
            <p>75</p>
          </el-card>
          <el-card class="two">
            <p>超时比例</p>
            <p>12.85%</p>
            <el-progress :width="30" :text-inside="true" :stroke-width="20" :percentage="70">
            </el-progress>
          </el-card>
        </div>

        <div class="aright">
          <!-- table数据展示 start -->
          <template>
            <purchaseOrderTable></purchaseOrderTable>
          </template>
          <!-- table数据展示 end -->
        </div>
      </div>
      <!-- 异常看板 end -->
    </div>

    <!-- 实时看板 start -->
    <div class="footer">
      <div>
      <p class="footerTitle">实时看板</p>
      <div class="dataBox">
      <el-card>
        <el-row>
          <el-col :span="12">
            <p>采购单量</p>
            <p>1560</p>
          </el-col>
          <el-col :span="12" class="circleBox">
            <el-progress :show-text="false" type="circle" :width="100" :stroke-width="15" :percentage="90"></el-progress>
            <div class="circleCenter">
              <div>完成率<br/>90%</div>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="8"><p>未到货</p><p>545</p></el-col>
          <el-col :span="8"><p>已到货</p><p>1015</p></el-col>
          <el-col :span="8"><p>已取消</p><p>12</p></el-col>
        </el-row>
      </el-card>

      <el-card>
        <el-row>
          <el-col :span="12">
            <p>采购产品总数量</p>
            <p>34122</p>
          </el-col>
          <el-col :span="12" class="circleBox">
            <el-progress :show-text="false" type="circle" :width="100" :stroke-width="15" :percentage="78" status="exception"></el-progress>
            <div class="circleCenter">
              <div>完成率<br/>78%</div>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="8"><p>未到货</p><p>1545</p></el-col>
          <el-col :span="8"><p>已到货</p><p>2654</p></el-col>
          <el-col :span="8"><p>已取消</p><p>5600</p></el-col>
        </el-row>
      </el-card>
      </div>
      </div>
      <div class="chartBox">
        <div class="chartHeader">
          <p>供应商单量排名</p>
          <p>采购品类分析</p>
          <el-button @click="getData" type="primary">刷新数据</el-button>
        </div>
        <div class="chartContent">
          <div></div>
          <div id="pie">
            <pieChart ref="pieData"></pieChart>
          </div>
        </div>
      </div>
    </div>
    <!-- 实时看板 end -->
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'',
  data(){
    return {
      orderStatisticsData:[],
      statisticsDate:[common.timestampSimple(new Date()- 3600 * 1000 * 24 * 15),common.timestampSimple(new Date() - 3600 * 1000 * 24)]
    }
  },
  mounted(){
    this.getPurchaseStatistics(2,'first')
  },
  components:{
    purchaseOrderTable:()=>import('@/components/home/purchase/purchase-order-table'),
    lineChart:()=>import('@/components/home/purchase/purchase-line-chart'), // 采购单量折线图组件
    pieChart:()=>import('@/components/home/purchase/purchase-pie-chart')  // 采购品类分析环形图组件
  },
  filters:{

  },
  computed:{
    datetimerange(){
      let [statisticsdateBegin, statisticsdateEnd] = this.statisticsDate || Array.from(2)
      return {
        statisticsdateBegin, // 统计时间段--start
        statisticsdateEnd // 统计时间段--end
      }
    }
  },
  methods:{

    // 获取采购单量数据
    getPurchaseStatistics(type,state){
      let params = type!==2?{type:type}:{...this.datetimerange,type:type}
      let options = {
        method:'get',
        url:`/homepage/outboundstatistics`,
        params:params
      }
      this.$axios(options).then(({ data }) => {
        if(!state)this.$refs.chartData.drawLine(data)
        this.orderStatisticsData = data
        let start = this.orderStatisticsData.map(item=>item.date)[0]
        let end = this.orderStatisticsData.map(item=>item.date).pop()
        this.statisticsDate = [start,end]
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 1835px;
  margin: 20px;
}
.main {
  display: flex;
  height: 430px;
}
// 统计看板
.chart {
  min-width: 810px;
  border: 1px solid #797979;
  border-radius: 8px;
  .el-row {
    p {
      text-align: left;
      font-size: 20px;
      font-weight: bold;
      margin-top: 18px;
      margin-left: 30px;
    }
    .el-button {
      font-size: 16px;
      margin-top: 22px;
      margin-left: 16px;
    }
    .el-date-editor {
      margin-top: 12px;
      margin-left: -36px;
    }
  }
}
// 异常看板
.abnormal {
  display: flex;
  min-width: 1010px;
  margin-left: 15px;
  border: 1px solid #797979;
  border-radius: 8px;
  .aleft {
    width: 365px;
    height: 100%;
    .aTitle {
      text-align: left;
      font-size: 20px;
      font-weight: bold;
      margin-top: 18px;
      margin-left: 30px;
    }
    .el-card {
    width: 280px;
    margin-left: 30px;
    margin-top: 25px;
    }
    .one {
    height: 110px;
    background-color: #5aa2e9;
    p {
      color: #ffffff;
      &:nth-child(1){
        font-size: 16px;
        margin-bottom: 15px;
      }
      &:nth-child(2){
        font-size: 30px;
      }
    }
  }
  .two {
    height: 150px;
    background-color: #ec808d;
    p {
      color: #ffffff;
      margin-bottom: 12px;
      &:nth-child(1){
        font-size: 16px;
      }
      &:nth-child(2){
        font-size: 30px;
      }
    }
    .el-progress {
      margin-top: 22px;
    }
  }
  }
  .aright {
    width: 600px;
    height: 410px;
  }
}
#sChart {
  width: 100%;
  height: 80%;
}
// 实时看板
.footer {
  display: flex;
  height: 345px;
  width: 100%;
  min-width: 1835px;
  margin-top: 12px;
  border: 1px solid #797979;
  border-radius: 8px;
  .footerTitle {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-left: 24px;
  }
  .dataBox {
    display: flex;
    width: 810px;
    height: 100%;
    .el-card {
      width: 350px;
      height: 220px;
      margin-left: 32px;
      margin-top: 36px;
      .el-row {
        &:nth-child(1) {
        p {
            &:nth-child(1) {
              font-size: 16px;
              margin-top: 10px;
              margin-bottom: 20px;
            }
            &:nth-child(2) {
              font-size: 36px;
            }
          }
        }
        .el-col-8 {
          font-size: 16px;
          p:nth-child(1) {
            margin-top: -6px;
            margin-bottom: 6px;
          }
        }
      }
    }
    .circleBox {
      position: relative;
      text-align: center;
      left: 30px;
      width: 100px;
    }
    .circleCenter {
      position: absolute;
      font-size: 14px;
      top: 34px;
      left: 31px;
    }
    .el-divider--horizontal {
      margin-top: 10px;
    }
  }
  .chartBox {
    width: 1010px;
    height: 100%;
    margin-left: 15px;
    .chartHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 55px;
      font-size: 16px;
      .el-button {
        margin-right: 16px;
      }
      p:nth-child(2) {
        margin-left: 20px;
      }
    }
    .chartContent {
      display: flex;
      div:nth-child(1) {
        width: 33%;
      }
      #pie {
        width: 66%;
        height: 290px;
      }
    }
  }
}
</style>
